<template>
	<view class="feedback">

		<view class="feedbackBox">
			<view class="title">
				问题类型
			</view>
			<view class="typeBox">
				<view class="typeitem" :class="{typeitemed:currIndex == 0}" @click="handleCurrindex(0)">登录注册异常</view>
				<view class="typeitem" :class="{typeitemed:currIndex == 1}" @click="handleCurrindex(1)">界面卡顿异常</view>
				<view class="typeitem" :class="{typeitemed:currIndex == 3}" @click="handleCurrindex(3)">APP功能故障</view>
				<view class="typeitem" :class="{typeitemed:currIndex == 4}" @click="handleCurrindex(4)">其他意见和建议</view>
			</view>

			<view class="remarkBox">

				<view class="title" style="margin-left: 0;">
					问题描述
				</view>

				<view class="remark">
					<textarea class="text1" v-model="description" maxlength=300 placeholder='请详细描述您的问题'
						@input="sumfontnum"></textarea>
					<text class="text2">{{fontNum}}/300</text>
				</view>

			</view>



			<!-- <input class="phone" type="text" placeholder="手机号/邮箱/QQ（选填）"> -->
			<view class="title" style="display: flex;margin-top: 40rpx;">
				<view class="">
					上传图片
				</view>
				<view class="text" style="color: #999999;margin-left: 10rpx;font-weight: 400;">
					（最多上传6张，图片大小控制在2M以下）
				</view>
			</view>
			<view class="imgBox">
				<view class="imgitem" v-for="(item,index) in imgs" :key="index"
					style="width: 216rpx;height: 216rpx;border-radius: 20rpx;position: relative;">
					<image class="" :src="item" style="width: 216rpx;height: 216rpx;border-radius: 20rpx;" />
					<u-icon name="close" color="#04767C" size="20" style="position: absolute;top:-14rpx;right:-14rpx"
						@click="handleClose(index)"></u-icon>
				</view>
				<image v-if="loadFlag" class="imgitem" src="@/static/image/upload.png"
					style="width: 216rpx;height: 216rpx;" @click="uploadzhaopian" />
			</view>

			<view class="title" style="display: flex;margin-top: 40rpx;">
				<view class="">
					联系方式
				</view>
				<!-- <view class="text" style="color: #999999;margin-left: 10rpx;font-weight: 400;">
					（至少填一项）
				</view> -->
			</view>

			<view class="inputout">
				<view class="inputbox">
					<view class="lable" style="width: 100rpx;">
						邮箱
					</view>
					<input type="text" v-model="wechat_account" class="item" placeholder="请输入">
				</view>
				
				<view class="inputbox">
					<view class="lable" style="width: 100rpx;">
						手机号
					</view>
					<input type="text" v-model="mobile" class="item" placeholder="请输入">
				</view>
			</view>
			
		</view>

		<view class="" style="height: 150rpx;">

		</view>

		<view class="bottomContent">
			<view class="Btn" @click="handleSubmitFeedback">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	import {
		// feedback
	} from "@/api/api.js"
	export default {
		data() {
			return {
				fontNum: 0,
				currIndex: 0,
				type: "登录注册异常",
				imgs: [],
				description: "",
				mobile: "",
				wechat_account: "",
				loadFlag: true
			}
		},
		onLoad() {

		},
		methods: {
			handleCurrindex(index) {
				this.currIndex = index
				if (this.currIndex == 0) {
					this.type = "登录注册异常"
					return
				}
				if (this.currIndex == 1) {
					this.type = "界面卡顿异常"
					return
				}
				if (this.currIndex == 2) {
					this.type = "充值购买问题"
					return
				}
				if (this.currIndex == 3) {
					this.type = "APP功能故障"
					return
				}
				if (this.currIndex == 4) {
					this.type = "其他意见和建议"
					return
				}

			},

			uploadzhaopian() {
				let that = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log("tempFilePaths", tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://admin.jinsekeji.com.cn/api/index/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								// formData: {
								// 	'user': 'test'
								// },
								header: {
									// "Content-Type": "application/form-data",
									"Authorization": 'Bearer' + ' ' + uni.getStorageSync("token")
								},
								success: (uploadFileRes) => {

									console.log("图片路径//////", JSON.parse(uploadFileRes.data).data);
									if (that.imgs.length >= 9) {
										uni.showToast({
											title: '最多可上传9张图片！',
											duration: 1000,
											icon: "none",
										});
										this.loadFlag = false
									} else {
										that.imgs.push(JSON.parse(uploadFileRes.data).data)
									}
									console.log("图片", that.imgs)
								},
								fail(e) {
									console.log("上传图片", e)
								}
							});
						}
					}
				});


			},

			handleClose(index) {
				// console.log("index",index)
				this.imgs.splice(index, 1)
				if (this.imgs < 9) {
					this.loadFlag = true
				}
			},
			async handleSubmitFeedback() {
				let data = {
					type: this.type,
					description: this.description,
					image: this.imgs,
					mobile: this.mobile,
					wechat_account: this.wechat_account
				}
				console.log("data", data)
				let res = await feedback(data)
				if (res.code == 1000) {
					this.currIndex = 0
					this.type = "登录注册异常"
					this.description = ""
					this.mobile = ""
					this.imgs = []
					this.wechat_account = ""
					uni.showToast({
						title: '反馈成功！',
						duration: 1500,
						icon: "none",
					});
					setTimeout(() => {
						uni.switchTab({
							url: "./index"
						})
					}, 2000)

				} else {
					uni.showToast({
						title: res.message,
						duration: 1500,
						icon: "none",
					});
				}
			},
			sumfontnum(e) {
				this.fontNum = e.detail.value.length
			},
		}
	}
</script>

<style scoped lang="scss">
	.feedback {
		.feedbackBox {
			width: 100%;
			box-sizing: border-box;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
				margin-left: 30rpx;
			}

			.typeBox {
				margin-top: 30rpx;
				display: flex;
				flex-wrap: wrap;
				margin-left: 30rpx;

				.typeitem {
					width: 202rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #359691;
					line-height: 48rpx;
					text-align: center;
					margin-right: 18rpx;
					margin-bottom: 20rpx;
				}

				.typeitem:nth-child(3n) {
					margin-right: 0;
				}

				.typeitemed {
					border: 1rpx solid #04767C;
				}
			}

			.remarkBox {
				width: 100%;
				height: 330rpx;
				background: #FFFFFF;
				padding: 16rpx 30rpx;
				box-sizing: border-box;
				margin-top: 106rpx;
			}

			.remark {
				width: 100%;
				background: #F7F8FA;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.text1 {
					width: 690rpx;
					height: 202rpx;
					background: #F1F1F1;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					margin-top: 30rpx;
					position: relative;
					padding: 20rpx;
					box-sizing: border-box;
				}

				.text2 {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 33rpx;
					// margin-left: 530rpx;
					position: absolute;
					left: 600rpx;
					margin-top: 10rpx;
				}
			}

			.phone {
				width: 100%;
				height: 100rpx;
				background: #F7F8FA;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				text-indent: 30rpx;
				margin-top: 20rpx;
			}

			.imgBox {
				margin-top: 30rpx;
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx;
				box-sizing: border-box;

				.imgitem {
					margin-right: 20rpx;
				}

				.imgitem:nth-child(3n) {
					margin-right: 0;
				}
			}
			
			.inputout{
				height: 216rpx;
				background: #FFFFFF;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
			}

			.inputbox {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 33rpx;
				margin-top: 20rpx;
				

				.item {
					width: 602rpx;
					height: 60rpx;
					background: #F1F1F1;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					text-indent: 30rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 33rpx;
				}
			}
		}

		.bottomContent {
			width: 100%;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 15rpx 40rpx;
			box-sizing: border-box;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 999;

			.Btn {
				width: 640rpx;
				height: 88rpx;
				background: #04767C;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				margin: 0 auto;
			}
		}
	}
</style>